<section id="content">
  <article class="post" style="position: relative;">

    <header >
      <h1>{{ page.title }}{% if page.tagline %} <small>{{ page.tagline }}</small>{% endif %}</h1>
    </header>

    <div style="background: #ccc; opacity: 0.5; display: none;">
        <nav style="position: fixed; top: 110px; right: 10px; z-index: 10; width: 120px; background: #ccc;padding: 20px 20px; opacity: 1; border-radius: 5px;">
            <div style="font-size: 20px; text-align: center; margin-bottom: 20px; color: rgb(255, 31, 31);">文章导航</div>
            <ul id="small-title-set" style="list-style: none; opacity: 3; font-weight: bold;">
            </ul>
        </nav>
    </div>
    <script>
        window.onload = function () {
            var childNodeData = document.getElementsByTagName('h3');
            if (! childNodeData.length) {
                return ;
            }

            var parent = document.getElementById('small-title-set');
            // var small_title_id = 1;
            for (var i=0; i<childNodeData.length; ++i) {
                var data = childNodeData[i].innerText;
                if (! data)
                    continue
                data = data.trim();

                var node = document.createElement('li');
                node.appendChild((function () {
                    var nodeA = document.createElement('a');
                    nodeA.setAttribute('href', '#' + childNodeData[i].id);
                    nodeA.style.color = 'rgb(47, 47, 47)';
                    // nodeA.style.textIndent = '2em';

                    if (data.length >= 10)
                        nodeA.innerHTML = data.substring(0, 10) + '...';
                    else
                        nodeA.innerHTML = data;

                    // nodeA.innerHTML = (small_title_id++) + '. '+ data + '...';

                    return nodeA;
                })());

                parent.appendChild(node);
                if (i == 0)
                    parent.parentNode.parentNode.style.display = 'block';
            }
        }
    </script>

    <section>
      <div class="post-extra">
        <div class="pull-left">
          <span>{{ page.date | date_to_long_string }}</span>
        </div>
        <div class="pull-right">
          {% include widgets/share_buttons %}
        </div>
      </div>
      {{ content }}
      {% if page.license != false %}
      <footer>
        <p style="text-align: center;">
          本作品由 <a href="mailto:{{ site.author.email }}">{{ site.author.name }}</a> 创作，采用
          <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="查看协议详细信息" target="_blank">CC BY-NC-SA 3.0 许可协议</a>
          进行许可。
        </p>
        <div>
            <div style="text-align: center;margin: 10px auto;">文章对你有用的话，支持一下吧!</div>
            <div style="width: 100%;margin: 0 auto;">
                <img style="display: block; margin: 0 auto;" src="/images/webwxgetmsgimg.png" width="200px", height="200px"/>    
            </div>
        </div>
      </footer>
      {% endif %}
    </section>

  </article>
</section>

<section>

  {% unless page.categories == empty %}
  <ul class="tag-box inline">
    <li><i class="icon-large icon-folder-open"></i></li>
    {% assign categories_list = page.categories %}
    {% include JB/categories_list %}
  </ul>
  {% endunless %}

  {% unless page.tags == empty %}
  <ul class="tag-box inline">
    <li><i class="icon-large icon-tags"></i></li>
    {% assign tags_list = page.tags %}
    {% include JB/tags_list %}
  </ul>
  {% endunless %}

  <div class="pagination">
    <ul>
      {% if page.previous %}
      <li class="prev"><a href="{{ BASE_PATH }}{{ page.previous.url }}" title="{{ page.previous.title }}">&larr; 上一篇</a></li>
      {% else %}
      <li class="prev disabled"><a>&larr; 上一篇</a></li>
      {% endif %}
      <li><a href="{{ BASE_PATH }}{{ site.JB.archive_path }}">文章列表</a></li>
      {% if page.next %}
      <li class="next"><a href="{{ BASE_PATH }}{{ page.next.url }}" title="{{ page.next.title }}">下一篇 &rarr;</a></li>
      {% else %}
      <li class="next disabled"><a>下一篇 &rarr;</a></li>
      {% endif %}
    </ul>
  </div>

</section>

<section id="comments">
  {% include JB/comments %}
</section>
